<template>
    <div style="width: 100%">
        <div class="search-h">
            <div style="flex: 1">
                <a-form
                    layout="horizontal"
                    :form="queryParams"
                >
                    <a-row>
                        <a-col
                            :md="12"
                            :sm="24"
                        >
                            <a-form-item
                                label="球馆名称"
                                :label-col="{ span: 5 }"
                                :wrapper-col="{ span: 18, offset: 1 }"
                            >
                                <a-input
                                    v-model="queryParams.name"
                                    placeholder="输入球馆名称"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <div>
                <a-button
                    type="primary"
                    @click="query"
                >
                    查询
                </a-button>
                <a-button
                    style="margin-left: 8px"
                    @click="reset"
                >
                    重置
                </a-button>
            </div>
        </div>
        <div class="btn-group">
            <a-button @click="add">
                新增
            </a-button>
            <a-button @click="del">
                删除
            </a-button>
            <a-button> 重置 </a-button>
        </div>
        <a-table
            row-key="workId"
            :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="data"
            :pagination="pageParams"
            @change="tableChange"
        >
            <template
                slot="status"
                slot-scope="rows, record"
            >
                <a-switch
                    :checked="Boolean(record.status)"
                    @change="onChange($event, record)"
                />
            </template>
            <template
                slot="operation"
                slot-scope="rows, record"
            >
                <a-icon
                    type="setting"
                    theme="filled"
                    style="color: #1890ff"
                    @click="edit(record)"
                />
                <a-icon
                    type="delete"
                    theme="filled"
                    @click="del(record)"
                />
            </template>
        </a-table>

        <!-- 新增-编辑 -->
        <a-modal
            v-model="visible"
            :title="title"
        >
            <a-form-model
                ref="ruleForm"
                layout="horizontal"
                :model="form"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 12 }"
                :rules="rules"
            >
                <a-form-model-item
                    label="承办名称"
                    prop="deptName"
                >
                    <a-input
                        v-model="form.deptName"
                        placeholder="请输入承办名称"
                    />
                </a-form-model-item>
                <a-form-model-item
                    label="客服ID"
                    prop="customerId"
                >
                    <a-input
                        v-model="form.customerId"
                        placeholder="请输入客服ID"
                    />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button
                    type="primary"
                    @click="handleOk"
                >
                    确定
                </a-button>
                <a-button @click="handleCancel">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
// import moment from 'moment'
const columns = [
    {
        title: '承办名称',
        dataIndex: 'deptName'
    },
    {
        title: '客服ID',
        dataIndex: 'customerId'
    },
    {
        title: '是否可用',
        key: 'status',
        scopedSlots: { customRender: 'status' },
        dataIndex: 'status'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime'
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime'
    },
    {
        title: '操作',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
        dataIndex: 'operation'
    }
];

export default {
    data() {
        return {
            visible: false,
            title: '新增',
            queryParams: {
                name: ''
            },
            pageParams: {
                current: 1,
                pageSize: 10,
                total: 0,
                'show-size-changer': true
            },
            form: {
                customerId: '',
                deptName: ''
            },
            rules: {
                customerId: [
                    { required: true, message: '请输入客服ID', trigger: 'blur' }
                ],
                deptName: [
                    { required: true, message: '请输入承办名称', trigger: 'blur' }
                ]
            },
            data: [],
            columns,
            selectedRowKeys: [], // Check here to configure the default column
            loading: false
        };
    },
    created() {
        this.getList();
    },
    methods: {
        tableChange(page) {
            this.pageParams.pageSize = page.pageSize;
            this.pageParams.current = page.current;
            this.getList();
        },
        query() {
            this.getList();
        },
        reset() {
            this.queryParams = this.$options.data().queryParams;
            this.getList();
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        // 增删改查
        onChange(falg, row) {
            row.status = falg ? 1 : 0;
            this.$api.duty
                .change({
                    workId: row.workId,
                    status: row.status
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success('修改成功');
                    } else {
                        this.$message.warn(res.data.message);
                    }
                });
        },
        add() {
            this.visible = true;
            this.title = '新增';
        },
        edit(record) {
            this.visible = true;
            this.title = '编辑';
            this.$api.duty.info({ workId: record.workId }).then((res) => {
                this.form = res.data.data;
            });
        },
        del(record) {
            let list = record.workId ? [record.workId] : this.selectedRowKeys;
            this.$confirm({
                title: '提示',
                content: '确定删除操作数据?',
                onOk: () => {
                    this.$api.duty.del(list).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message);
                            this.getList();
                        } else {
                            this.$message.warn(res.data.message);
                        }
                    });
                }
            });
        },
        handleOk() {
            let params = {
                customerId: this.form.customerId,
                deptName: this.form.deptName,
                status: 0
            };
            if (this.form.workId) {
                // 编辑ID
                params.workId = this.form.workId;
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$api.duty
                        .save(params)
                        .then((res) => {
                            if (res.data.code === 200) {
                                this.getList();
                                this.visible = false;
                                this.handleCancel();
                                this.$message.success(res.data.message);
                            } else {
                                this.$message.warn(res.data.message);
                            }
                        })
                        .finally(() => {
                            this.visible = false;
                        });
                }
            });
        },
        handleCancel() {
            this.form = this.$options.data().form;
            this.visible = false;
        },
        // 接口
        getList() {
            let params = {
                pageNum: this.pageParams.current,
                pageSize: this.pageParams.pageSize,
                ...this.queryParams
            };
            this.$api.duty.list(params).then((res) => {
                if (res.data.code === 200) {
                    this.data = res.data.data;
                    this.pageParams.total = res.data.total;
                } else {
                    this.$message.warn(res.data.message);
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.search-h {
	display: flex;
	justify-content: space-between;
	margin: 10px 0 8px;

	/deep/ .ant-form-item {
		margin-bottom: 0px !important;
	}
}

.btn-group {
	margin-bottom: 12px;
}
</style>
